<template>
	<navbar title="售后详情" :isBack="true"></navbar>
	<view class="" style="padding: 24rpx 30rpx;">
		<!-- //申请 -->
		<view style="padding: 38rpx 26rpx;background-color: white;border-radius: 10rpx;" v-if="info.state == 1">
			<view class="" style="font-size: 44rpx;font-weight: bold;">
				平台处理中
			</view>
			<view class="" style="margin-top: 10rpx;color: #696969;">
				商家将在24小时内处理，请耐心等待...
			</view>
			<view class="" style="margin-top: 30rpx;border: 2rpx solid #F5F6F8;width: 100%;">

			</view>
			<view class=""
				style="display: flex;align-items: center;justify-content: flex-end;width: 100%;margin-top: 20rpx;">
				<image src="https://ykp-new.oss-cn-hangzhou.aliyuncs.com/diedai/callshop.png"
					style="width: 34rpx;height: 34rpx;" mode=""></image>
				<view class="" style="font-size: 32rpx;margin-left: 20rpx;">
					联系客服
				</view>
			</view>
		</view>
		<!-- 退款成功 -->
		<view style="padding: 38rpx 26rpx;background-color: white;border-radius: 10rpx;" v-if="info.state == 4">
			<view class="" style="font-size: 44rpx;font-weight: bold;">
				已完成
			</view>
			<view class="" style="margin-top: 20rpx;color: #696969;">
				退款金额
			</view>

			<view class="" style="margin-top: 20rpx;">
				<span>￥</span>
				<span style="font-size: 48rpx;font-weight: bold;">{{info.true_price}}</span>
				<span style="color: #696969;font-size: 24rpx;margin-left: 20rpx;">退款金额原路退还至您下单账户</span>
			</view>
		</view>
		<!-- 寄回商品 -->
		<view style="padding: 38rpx 26rpx;background-color: white;border-radius: 10rpx;" v-if="info.state == 2">
			<view class="" style="font-size: 44rpx;font-weight: bold;">
				已同意，请寄回商品
			</view>
			<view class="" style="margin-top: 20rpx;color: #696969;display: flex;align-items: center;">
				请在<span style="color: #F13535;">

					<u-count-down :timestamp="time" format="DD:HH:mm:ss" autoStart @change="onChange">
						<view class="time" style="display: flex;">
							<text class="time__item">{{ timeData.days }}天</text>
							<text class="time__item">{{ timeData.hours>10?timeData.hours:'0'+timeData.hours}}时</text>
							<text class="time__item">{{ timeData.minutes }}分</text>
							<text class="time__item">{{ timeData.seconds }}秒</text>
						</view>
					</u-count-down>
				</span>内寄回商品
			</view>

		</view>
		<!-- 包裹已寄出~ -->
		<view style="padding: 38rpx 26rpx;background-color: white;border-radius: 10rpx;" v-if="info.state == 3">
			<view class="" style="font-size: 44rpx;font-weight: bold;">
				包裹已寄出~
			</view>
			<view class="" style="margin-top: 30rpx;border: 2rpx solid #F5F6F8;width: 100%;">

			</view>
			<view class="" style="margin-top: 30rpx;font-size: 32rpx;">
				寄回信息
			</view>
			<view class="" style="margin-top: 30rpx;color: #696969;">
				{{info.config.after_sales_address}}
			</view>
			<!-- <view class="" style="margin-top: 30rpx;">
				周市镇周新公路58号路能体育
			</view> -->
			<view class="" style="margin-top: 30rpx;color: #696969;">
				{{info.config.after_sales_name}} {{info.config.after_sales_mobile}}
			</view>

		</view>
		<view class="jhbox" v-if="info.state == 2">
			<view class="jh">
				<view class="left" style="display: flex;align-items: center;">
					<image src="https://ykp-new.oss-cn-hangzhou.aliyuncs.com/diedai/jh.png" mode="widthFix"
						style="width: 48rpx;height: 48rpx;"></image>
					<view style="margin-left: 20rpx;font-weight: bold;">寄回信息</view>
				</view>
				<view
					style="display:flex;width:100%;margin-top: 20rpx;align-items: center;justify-content: space-between;">
					<view style="font-size: 24rpx;color: #696969;margin-left: 68rpx;">
						<view class="" style="display: flex;justify-content: space-between;">
							<view style="width: 180rpx;">收件人：{{info.config.after_sales_name}}</view>
							<view class="cent">手机号：{{info.config.after_sales_mobile}}</view>
						</view>

						<view class="cleft shenglueh2" style="margin-top: 20rpx;">
							寄回地址：{{info.config.after_sales_address}}
						</view>
					</view>
					<view class="content">

						<image @tap="copyJhAddr(info.config)"
							src="https://ykp-new.oss-cn-hangzhou.aliyuncs.com/0fx/user/order/10.png" mode="widthFix"
							style="width: 32rpx;height: 32rpx;"></image>
					</view>
				</view>
				<view class="" style="display: flex;align-items: center;margin-top: 20rpx;">
					<image src="../../../static/image/jj.png" style="width: 48rpx;height: 48rpx;" mode="">
					</image>
					<view class="title titlebottom"
						style="font-weight: bold;font-size: 28rpx;color: black;margin-left: 20rpx;">寄件信息
					</view>

				</view>
				<view v-if="!edit" style="display:flex;width:100%;align-items: center;justify-content: space-between;">
					<view class="" style="font-size: 24rpx;color: #696969;">

						<view class="" style="margin-left: 68rpx;">
							<view class="" style="display: flex;margin-top: 20rpx;">
								<view class="widthtext shenglueh" style="width: 180rpx;">寄件人：{{info.address.name}}
								</view>
								<view class="cent" style="">手机号：{{info.address.mobile}}</view>
							</view>

							<view class="cleft shenglueh2" style="margin-top: 20rpx;">
								寄件地址：{{info.address.province}}{{info.address.city}}{{info.address.area}}{{info.address.address}}
							</view>
						</view>

					</view>
					<view class="content">

						<image @tap="editJh()" src="https://ykp-new.oss-cn-hangzhou.aliyuncs.com/0fx/user/order/11.png"
							mode="widthFix" style="width: 32rpx;height: 32rpx;"></image>
					</view>
				</view>

			</view>
			<!-- 填写寄件信息 -->


			<view class="" style="font-size: 24rpx;" v-if="edit">
				<view class="" style="width: 100%;margin-top: 20rpx; margin-left: 68rpx;">
					<view class="" style="display: flex;align-items: center;">
						<span style="width: 100rpx;">收件人</span>
						<u-input v-model="info.address.name" type="text" placeholder="请输入"
							style="height: 80rpx;background-color: #F6F7FB;padding: 0 20rpx;" />
					</view>
					<view class="" style="display: flex; align-items: center;margin-top: 20rpx;">
						<span style="width: 100rpx;">手机号</span> <u-input v-model="info.address.mobile" type="text"
							placeholder="请输入" style="height: 80rpx;background-color: #F6F7FB;padding: 0 20rpx;" />
					</view>
				</view>
				<view class="" style="display: flex;align-items: center;margin-top: 20rpx;margin-left: 68rpx;">
					<view class="" style="width: 100rpx;">省市区</view>
					<view class="" @tap="opendAddr()"
						style="height: 80rpx;background-color: #F6F7FB;padding: 0 20rpx;display: flex;align-items: center;">
						<view class="">{{addr.pca[0]}}{{addr.pca[1]}}{{addr.pca[2]}}</view>
					</view>
				</view>
				<view class="" style="display: flex;align-items: center;margin-top: 20rpx;margin-left: 68rpx;">
					<span style="width: 100rpx;">寄回地址</span> <u-input v-model="info.address.address" type="text"
						placeholder="请输入" style="height: 80rpx;background-color: #F6F7FB;padding: 0 20rpx;" />
				</view>


			</view>
			<view class="">
				<view class="t-top t-top-1 t-top-2">
					<view class="r-lable">快递公司</view>
					<view class="r-input center_input addst" style="margin-left: 15rpx;" @tap="pickerShow = true">

						<view class="textcolor">
							<span v-if="pickerIndex >= 0"
								style="color: black;">{{info.logistics[pickerIndex].name}}</span>
							<span v-else>点击选择快递公司</span>
						</view>
					</view>
				</view>
				<view class="t-top t-top-1 t-top-2">
					<view class="r-lable">快递单号</view>
					<u-input v-model="delivery_no" type="text" placeholder="请输入" class="r-input"
						style="margin-left: 15rpx;" placeholder-style="color:#dfe0e3;" />
					<!-- <input class="r-input" placeholder="请输入" placeholder-style="color:#dfe0e3;" /> -->
				</view>
				<view style="display: flex;overflow: hidden;">
					<view v-if="edit"
						style="margin-top: 30rpx;border-radius: 10upx;height: 90rpx;text-align: center;line-height: 90rpx;flex: 1;background-color: #F3F4F4;font-size: 28rpx;border-radius: 10rpx;margin-right: 30rpx;"
						@tap="edit = false">取消</view>
					<view class="btns" @tap="rSubmit()">确认上传</view>
				</view>
			</view>
		</view>
		<view class="" style="margin-top: 24rpx;padding: 36rpx 28rpx;background-color: white;border-radius: 10rpx;"
			v-for="item in info.goods">
			<view class="" style="display: flex;">
				<view class="">
					<image :src="item.goods_cover" style="width: 140rpx;height: 140rpx;border-radius: 10rpx;" mode="">
					</image>
				</view>
				<view class=""
					style="margin-left: 20rpx;display: flex;flex-direction: column;justify-content: space-between;height: 140rpx;width: 100%;">
					<view class="" style="display: flex;justify-content: space-between;width:100%">
						<view class="ellipsis-2" style="width: 330rpx;">
							{{item.goods_name}}
						</view>
						<view class="" style="font-weight: bold;">
							<span style="font-size: 20rpx;">￥</span>
							<span style="font-size: 32rpx;">{{item.goods_price}}</span>
						</view>
					</view>
					<view class=""
						style="width: 100%;display: flex;justify-content: space-between;color: #747474;font-size: 24rpx;">
						<view class="" style="">
							{{item.specs}}
						</view>
						<view class="">
							x{{item.num}}
						</view>
					</view>
				</view>
			</view>
			<view class="" style="margin-top: 40rpx;display: flex;justify-content: flex-end;" v-if="info.state < 4">

				<view class="" @tap="cancel"
					style="width: 200rpx;height: 72rpx;border-radius: 10rpx;display: flex;justify-content: center;align-items: center;background-color: #F3F4F4;">
					取消售后
				</view>
			</view>
		</view>
		<view class="card">
			<view class="titles" style="font-weight: bold;">订单信息</view>
			<view class="form1" v-if="info.order_no">
				<view class="lable" style="color:#333333">订单编号</view>
				<view class="content shenglueh" style="color:#333333">{{info.order_no}}</view>
				<image class="copybtn2" src="https://ykp-new.oss-cn-hangzhou.aliyuncs.com/diedai/copy.png"
					@tap="copy(info.order_no)" mode="aspectFit"></image>
			</view>
			<view class="form1" v-if="info.type_name">
				<view class="lable" style="color:#333333">申请类型</view>
				<view class="content shenglueh" style="color:#333333">{{info.type_name}}</view>
			</view>
			<view class="form1" v-if="info.total_price">
				<view class="lable" style="color:#333333">申请金额</view>
				<view class="content shenglueh" style="color:#333333">{{info.total_price}}</view>
			</view>
			<view class="form1" v-if="info.apply_reason">
				<view class="lable" style="color:#333333">申请理由</view>
				<view class="content shenglueh" style="color:#333333">{{info.apply_reason}}</view>
			</view>
			<view class="form1" v-if="info.create_time">
				<view class="lable" style="color:#333333">申请时间</view>
				<view class="content shenglueh" style="color:#333333">{{info.create_time}}</view>
			</view>
			<view class="form1" v-if="info.delivery_time">
				<view class="lable" style="color:#333333">寄件时间</view>
				<view class="content shenglueh" style="color:#333333">{{info.delivery_time}}</view>
			</view>
			<view class="form1" v-if="info.return_time">
				<view class="lable" style="color:#333333">退款时间</view>
				<view class="content shenglueh" style="color:#333333">{{info.return_time}}</view>
			</view>

		</view>
		<!-- 寄件物流 -->
		<view class="" style="padding: 30rpx 24rpx;background-color: white;margin-top: 24rpx;border-radius: 10rpx;"
			v-if="info.delivery_no">
			<view style="font-weight: bold;font-size: 32rpx;">
				寄件物流
			</view>
			<view class="" style="width: 100%;border: 2rpx solid #F5F6F8;margin: 25rpx 0 20rpx 0;">

			</view>
			<view class="" style="width: 100%;justify-content:space-between;display: flex;">
				<view class="">
					{{info.delivery_name}}
				</view>
				<view class="">
					{{info.delivery_no}}
				</view>
				<view class="" style="color: #3E5088;" @tap="openWl">
					查看物流>
				</view>
			</view>
		</view>
	</view>
	<!-- 物流弹窗 -->
	<u-popup v-model="delivery_model" :border-radius="30" mode="bottom" @close="delivery_model=false"
		style="position: relative;">
		<image class="chahaoC" :src="imageUrl+'colse_chooseshop.png'" mode="aspectFit" @click="delivery_model=false">
		</image>
		<logistics :logData="logData" :list="delivery_info" :imageUrl="imageUrl"></logistics>
	</u-popup>
	<u-picker mode="selector" v-model="pickerShow" :range="pickerArr" range-key="name"
		@confirm="pickerConfirm"></u-picker>
	<!-- 	<w-picker mode="region" :defaultVal="addr.pca" :hideArea="false" @confirm="onConfiraddr" ref="regionaddr"
		:timeout="true"></w-picker> -->
</template>

<script setup lang="ts">
	import { onLoad, onShow } from '@dcloudio/uni-app'
	import { ref, reactive, computed } from 'vue'
	import { shopAfterSalesInfo, shopSendGoods, shopAfterSalesLogistics, shopCancelAfterSales } from '@/service/api/shop'
	//	import wPicker from '@/components/w-picker/w-picker.vue';
	import logistics from "@/pagesB/mine/mineStudent/logistics.vue"
	import tools from '@/utils/tools'
	const info = ref({}) as any
	const pickerShow = ref(false)
	const delivery_model = ref(false)
	const edit = ref(false)
	const regionaddr = ref(null)
	const delivery_no = ref('')
	const logData = reactive({
		delivery_no: "",
		address: ""
	})
	const addr = reactive({
		pca: [],
		address: '',
		consignee: '',
		phone: ''
	})
	const delivery_info = ref([])
	const timeData = ref({}) as any
	const param = reactive({
		id: ""
	})
	const pickerIndex = ref(-1)
	const time = ref(0)
	const imageUrl = ref('https://ykp-new.oss-cn-hangzhou.aliyuncs.com/diedai/')
	const pickerArr = ref([])
	onLoad((opt) => {
		param.id = opt.id;
		getData()
	})
	const getData = async () => {
		const res = await shopAfterSalesInfo(param);
		info.value = res.msg;
		time.value = info.value.time * 1000;
		pickerArr.value = info.value.logistics;

	}

	//取消售后
	const cancel = async () => {
		const res = await shopCancelAfterSales({ id: info.value.id })
		tools.showToast(res.msg);
		if (res.code == 1) {
			setTimeout(() => {
				tools.navTo('', 2)
			}, 500)
		}

	}
	//打开物流弹窗
	const openWl = async () => {
		const r = await shopAfterSalesLogistics({ id: info.value.id })
		if (r.code == 1) {
			delivery_model.value = true
			logData.delivery_no = r.msg.delivery_no;
			logData.address = r.msg.address;
			delivery_info.value = r.msg.logistics_data.list
		}
		console.log(r);

	}
	const pickerConfirm = (v) => {
		pickerIndex.value = v;

		console.log(v);
	}
	const editJh = () => {
		edit.value = true;
		addr.pca = [info.value.address.province, info.value.address.city, info.value.address.area];
	}
	const copy = (val) => {
		tools.setClipboardData(val);
	}
	const onChange = (e) => {
		timeData.value = e;
	}
	//打开地址
	const opendAddr = () => {
		regionaddr.value.show();
		uni.hideKeyboard()
	}
	//确认选择地址
	const onConfiraddr = (e) => {
		addr.pca = e.checkArr;
	}
	//确认修改
	const rSubmit = async () => {

		if (addr.pca.length > 0) {
			info.value.address.province = addr.pca[0];
			info.value.address.city = addr.pca[1];
			info.value.address.area = addr.pca[2];
		}

		var data = {
			id: info.value.id,
			delivery_name: pickerArr.value[pickerIndex.value].name,
			delivery_no: delivery_no.value,
			address: info.value.address,
		};
 
		const res = await shopSendGoods(data);
		tools.showToast(res.msg);
		console.log(res);
 

		edit.value = false;
		setTimeout(() => {
			getData()
		}, 500)

	}
</script>

<style scoped lang="scss">
	.chahaoC {
		position: absolute;
		width: 24rpx;
		height: 24rpx;
		top: 30rpx;
		right: 30rpx;
		z-index: 22;
	}

	.ellipsis-2 {
		// 注意，不要设置此标签的高度，下方代码设置了行数，会自动根据行数进行计算高度的。

		//文本超出部分以...形式展示
		text-overflow: -o-ellipsis-lastline;
		//整体超出部分隐藏
		overflow: hidden;
		//文本超出部分以...形式展示，同第一行样式代码
		text-overflow: ellipsis;
		//display 块级元素展示
		display: -webkit-box;
		//设置文本行数为2行
		-webkit-line-clamp: 2;
		//设置文本行数为2行
		line-clamp: 2;
		//从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）
		-webkit-box-orient: vertical;

	}

	.jhbox {
		background-color: #ffffff;
		padding: 30upx;
		margin: 30rpx 0;
		border-radius: 20rpx;

		.t-top {
			display: flex;
			align-content: center;

			.t-top-icon {
				display: block;
				width: 40upx;
			}

			.text {
				font-size: 30upx;
				color: #666666;
			}

			.text-1 {
				margin-left: 60upx;
			}

			.textflex {
				flex: 1;
			}

			.images {
				display: block;
				margin-left: 20upx;
				width: 30upx;
			}

			.r-lable {
				width: 140upx;
				font-size: 30upx;
			}

			.r-input {
				flex: 1;
				font-size: 30upx;
				height: 80upx;
				padding: 0 20upx;
				border-radius: 10upx;
				background-color: #F6F7FB;
			}

			.center_input {
				display: flex;
				justify-content: flex-start;
				align-items: center;
			}

			.textcolor {
				color: #dfe0e3;
			}

			.addst {
				width: 440rpx;
				display: flex;
			}
		}

		.btns {
			margin-top: 30upx;
			border-radius: 10upx;
			height: 90upx;
			text-align: center;
			line-height: 90upx;
			color: white;
			background: linear-gradient(90deg, #5062A7 0%, #354678 100%);
			flex: 1;
			font-siez: 28rpx;
		}

		.t-top-1 {
			margin-left: 10upx;
			margin-top: 20upx;
		}

		.t-top-2 {
			align-items: center;
			margin-top: 30upx;
		}
	}

	.card {
		padding: 30upx;
		margin-top: 24rpx;
		background-color: #ffffff;
		border-radius: 10upx;

		.adderss_header {
			display: flex;
			align-items: center;
			margin-bottom: 10rpx;

			.grey {
				color: #666666;
				font-size: 24upx;

			}

			.dingwei {
				width: 32rpx;
				height: 32rpx;
				margin-right: 12rpx;
			}
		}

		.grey {
			color: #666666;
			font-size: 24upx;
		}

		.addrcenter {
			// margin: 20upx 0;
			display: flex;
			align-items: center;

			.msg {
				flex: 1;
				font-weight: bold;
			}

			.iconsr {
				display: block;
				width: 12upx;
			}

			.addrcenter_add {
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.msg {
					flex: 1;
					font-weight: bold;
				}

				.dingwei {
					width: 32rpx;
					height: 32rpx;
					margin-right: 12rpx;
				}

				.iconsr {
					display: block;
					width: 12upx;
				}
			}
		}

		.titles {
			font-size: 32rpx;
			color: #000000;
		}

		.titles_detils {
			height: 40rpx;
			font-size: 28rpx;
			color: #666666;
			margin-top: 20rpx;
		}

		.titles1 {
			padding-bottom: 30upx;
			border-bottom: 1upx solid #F9F9F9;
			margin-bottom: 15upx;
		}

		.center {

			//还原
			margin: 20rpx -30rpx;
			display: flex;
			// align-items: center;
			padding: 30upx;
			position: relative;

			.cover {
				display: block;
				width: 140upx;
				height: 140upx;
				border-radius: 10upx;
			}

			//新
			.shop_title {
				margin-left: 20rpx;

				.shop_title_top {
					display: flex;

					.shop_title_top_name {
						width: 330rpx;
						height: 80rpx;
						font-size: 24rpx;
						line-height: 40rpx;
						color: #000000;
					}

					.shop_title_top_price {
						position: absolute;
						right: 30rpx;
						top: 25rpx;
						font-size: 32rpx;
						line-height: 50rpx;
						color: #000000;
						font-weight: bold;

						&::before {
							content: '￥';
							font-size: 20rpx;
						}
					}
				}

				.shop_title_bom {
					margin-top: 10rpx;
					font-size: 24rpx;
					color: #888888;

					.shop_title_bom_state {
						position: absolute;
						right: 30rpx;
						bottom: 32rpx;
						line-height: 50rpx;
						font-size: 24rpx;
						color: #888888;
					}

					text {
						margin-left: 40rpx;
					}
				}

				.JSB {
					display: flex;
					justify-content: space-between;
					align-items: center;
				}
			}
		}

		.shipped_line {
			width: 100%;
			height: 1rpx;
			background-color: #EEEEEE;
			margin: 30rpx 0;
		}

		.shipped {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.pay_blck {
				font-size: 28rpx;
				color: #3E5088;
			}

			.text1 {
				font-size: 28rpx;
			}

			.textM {
				color: #000000;
				font-weight: bold;
				font-size: 36rpx;

				&::before {
					content: '￥';
					font-size: 24rpx;
				}
			}
		}

		.priceinfo {

			// padding: 15upx 0;
			// border-bottom: 1upx solid #F9F9F9;
			.form {
				padding: 15upx 0;
				display: flex;
				align-items: center;
				font-size: 28upx;

				.lable {
					flex: 1;
				}

				.iconsrs {
					display: block;
					width: 12upx;
					margin-left: 20upx;
				}

				.colors {
					color: #F17B55;
				}
			}
		}

		.centerb {
			padding-top: 30upx;
			display: flex;
			align-items: center;
			justify-content: flex-end;

			.color {
				color: #F17B55;
			}
		}

		.centerb2 {
			display: flex;
			align-items: center;
			justify-content: flex-end;

			.color2 {
				color: #F17B55;
			}
		}

		.form2 {
			display: flex;
			align-items: center;
			padding-top: 15upx;
			font-size: 30upx;

			.lable {
				width: 140upx;
			}

			.content {
				flex: 1;
			}

			.copybtn {
				color: #8159F6;
				font-size: 28upx;
			}
		}

		.form1 {
			display: flex;
			align-items: center;
			padding-top: 15upx;
			font-size: 28upx;
			color: #999999;

			.lable {
				width: 140upx;
			}

			.content {
				flex: 1;
				margin-left: 50rpx;
			}

			.copybtnimag {
				width: 24.02rpx;
				height: 28.02rpx;
			}

			.copybtn {
				font-size: 20upx;
				background-color: #F9F9F9;
				width: 60upx;
				height: 32upx;
				line-height: 32upx;
				text-align: center;
				border-radius: 40upx;
			}

			.copybtn2 {
				margin-left: 20rpx;
				width: 24.02rpx;
				height: 28.02rpx;
			}
		}

		.form2 {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-top: 15upx;
			font-size: 28upx;
			color: #999999;

			.form2_body {
				display: flex;
				align-items: center;

				.labl2 {
					width: 140upx;
				}

				.content2 {
					flex: 1;
					margin-left: 30rpx;
					max-width: 270rpx;
				}

				.copybtn2 {
					margin-left: 20rpx;
					width: 24.02rpx;
					height: 28.02rpx;
				}
			}

			.look_shipped {
				font-size: 28rpx;
				color: #8159F6;
			}
		}
	}
</style>
<style>
	page {
		background: #F5F6F8;
	}
</style>